<template>
  <div class="vdrcontainer">
    <vdr
      :w="w"
      :h="hh + 10"
      :debug="false"
      :min-width="20"
      :min-height="20"
      :isConflictCheck="false"
      :snap="true"
      :snapTolerance="10"
      :scaleRatio="1"
      :x="x"
      :handles="['br']"
      ref="redvdr"
      :y="y"
      class="vdrclass"
      @resizing="resizing"
    >
      <template  #br>
        <img
          src="/dragsize.png"
          alt=""
          style="width: 15px; position: absolute; top: -13px; left: -13px"
        />
      </template>
      <div
        style="background-color: #1d1d1dab;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          border-radius: 10px;
        "
      >
        <div style="padding: 5px 10px">
          <div
            style="
              height: 40px;
              background-color: #1d1d1dab;
              border-bottom: 2px solid #3f8aef;
              cursor: move;
              color: #000;
              font-size: 25px;
            "
            id="dragpannel"
          >
            <span style="position: absolute; left: 5px; top: 6px">
              <!-- <img
                :src="'/assets/v2/windowheaderbg.png'"
                :style="{
                  width: titlewidth,
                  height: '38px',
                  marginLeft: '5px',
                }"
              /> -->
            </span>
            <span
              style="
                position: absolute;
                left: 30px;
                top: 10px;
                font-size: 20px;
                color: #ffff;
              "
            >
              {{ comtitle }}
            </span>
            <i
              :class="ishide ? 'iconfont icon-caret-bottom' : 'iconfont icon-caret-top'"
              style="
                cursor: pointer;
                position: absolute;
                right: 60px;
                top: 11px;
                font-size: 20px;
                color: #ffff;
              "
              @click="hidewindow()"
            ></i>
            <i
              class="iconfont icon-circle-close"
              style="
                cursor: pointer;
                font-size: 20px;
                color: #ffff;
                position: absolute;
                right: 25px;
                top: 11px;
              "
              @click="closewindow()"
            ></i>
          </div>
        </div>

        <div
          class="vdrcontent"
          style="pointer-events: auto; width: 100%; cursor: default"
          @mousedown.stop="1"
          @touchstart.stop="1"
          v-show="ifcontent"
        >
          <slot class="contentdiv" />
        </div>
      </div>
    </vdr>
  </div>
</template>
<script>
import vdr from "./vdr/src";
import { useEarthStore } from '@/stores/earth'
import { mapState, mapActions } from 'pinia'

import _ from 'lodash'

export default {
  name: "basedragpannel",

  components: { vdr },

  props: {
    comname: {
      type: String,
      default: "",
    },
    comtitle: {
      type: String,
      default: "",
    },
    w: {
      type: Number,
      default: 300,
    },
    h: {
      type: Number,
      default: 300,
    },
    x: {
      type: Number,
      default: 300,
    },
    y: {
      type: Number,
      default: 300,
    },
  },

  data() {
    return {
      ifcontent: false,
      ishide: false,
      height: 0,
      hh: 200,
    };
  },
  computed: {
    titlewidth() {
      if (this.comtitle.length > 4) {
        return 151 + (this.comtitle.length - 4) * 22 + "px";
      } else {
        return "151px";
      }
    },
  },
  watch: {},
  mounted() {
    setTimeout(() => {
      this.ifcontent = true;
      this.height = this.h;
      this.hh = this.h;
    }, 0);
  },
  methods: {
    resizing(p) {
      this.$emit("resizing", p);
    },
    hidewindow() {
      this.ishide = !this.ishide;
      if (this.ishide) {
        this.hh = 40;
      } else {
        this.hh = this.height;
      }
    },
    closewindow() {
      if (_.has(this.$parent, "closewindow")) {
        this.$parent.closewindow();
      }
      setTimeout(() => {
        useEarthStore().pannellist
        if (Object.keys(useEarthStore().pannellist).indexOf(this.comname) != -1) {
          delete useEarthStore().pannellist[this.comname]
          // this.$store.state.editer.hoverpannel.com = "";
        }
      }, 200);
    },
  },
};
</script>
<style lang='scss'>
.vdrcontent {
  height: calc(100% - 50px);
  overflow-y: hidden;
  overflow-x: hidden;
}
.vdrcontainer {
  width: calc(100vw);
  height: calc(100vh);
  position: fixed;
  top: 0px;
  left: 0px;
  pointer-events: none;
  z-index: 5;
}

.vdrclass {
  pointer-events: auto;
  cursor: pointer;
  border: 1px dashed #fff0 !important;
  border-radius: 5px;
  .handle-br {
    background-color: #fff0;
    border: 1px solid #fff0;
    box-shadow: 0 0 2px #fff0;
  }
}
</style>
